<script setup lang='ts'>
import { ref } from 'vue'
import CryptoJS from 'crypto-js';
import { postcryptoApi } from '@/api/crypto'
import { encrypt } from '@/utils/sm4'

const text = ref('ygod')
const encryptText = ref('')
const decryptText = ref('')

const showDecrypt = ref(false)

const key = 'ikun'

const columns = [
  { prop: 'name', label: '工具/方法', minWidth: '140' },
  { prop: 'type', label: '类型', minWidth: '120' },
  { prop: 'reversible', label: '可逆性', minWidth: '100' },
  { prop: 'keyManagement', label: '密钥管理', minWidth: '130' },
  { prop: 'performance', label: '性能', minWidth: '140' },
  { prop: 'purpose', label: '主要用途', minWidth: '180' },
  { prop: 'advantages', label: '优点', minWidth: '240' },
  { prop: 'disadvantages', label: '缺点', minWidth: '240' }
]

const tableData = [
  {
    name: 'SHA-256',
    type: '哈希算法',
    reversible: '不可逆',
    keyManagement: '无需密钥',
    performance: '极快（纳秒级）',
    purpose: '数据完整性校验、密码存储',
    advantages: '抗碰撞性强，标准化高',
    disadvantages: '无法解密，需结合盐值防御彩虹表'
  },
  {
    name: 'SM4/AES',
    type: '对称加密',
    reversible: '可逆',
    keyManagement: '需安全存储密钥',
    performance: '快（微秒级）',
    purpose: '数据加密传输/存储',
    advantages: '高效，支持多种模式（CBC/GCM等）',
    disadvantages: '密钥泄露导致数据全盘暴露'
  },
  {
    name: 'HMAC-SHA256',
    type: '消息认证码',
    reversible: '不可逆',
    keyManagement: '需共享密钥',
    performance: '较快（微秒级）',
    purpose: 'API签名、防篡改',
    advantages: '防止数据篡改，支持身份验证',
    disadvantages: '需安全分发密钥，无法加密数据'
  }
]

const handleEncryptSHA256 = () => { // sha256 加密
  encryptText.value = CryptoJS.SHA256(text.value).toString(CryptoJS.enc.Hex)
}

const handleEncryptHMACSHA256 = () => { // hmac-sha256 加密
  encryptText.value = CryptoJS.HmacSHA256(text.value, key).toString(CryptoJS.enc.Hex)
}

const handleEncryptSM4 = () => { // sm4 加密
  encryptText.value = encrypt({name: text.value})
  showDecrypt.value = true
}

const handleDecrypt = async () => { // 发送给后端进行解密
  const res = await postcryptoApi({crypto: encryptText.value})
  decryptText.value = res.name
}
</script>


<template>
  <div class="encrypt">
    <p style="color: green">key 统一为 <i>ikun</i></p>
    <p>输入需要加密的内容:</p>
    <el-input v-model="text" placeholder="请输入内容" />
    <el-button type="primary" @click="handleEncryptSHA256">SHA256加密</el-button>
    <el-button type="primary" @click="handleEncryptHMACSHA256">HMAC-SHA256加密</el-button>
    <el-button type="primary" @click="handleEncryptSM4">SM4加密</el-button>
  </div>
  <div class="decrypt">
    <p>加密后的内容:</p>
    <el-input :value="encryptText" type="textarea" :rows="4" resize="none" />
    <el-button type="success" v-if="showDecrypt" @click="handleDecrypt">发送给后端进行解密</el-button>
  </div>
  <div class="encrypt" v-if="showDecrypt">
    <p>解密后的的内容:</p>
    <el-input :value="decryptText"/>
  </div>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    :header-cell-style="{ background: '#f5f7fa' }"
  >
    <el-table-column
      v-for="col in columns"
      :key="col.prop"
      :prop="col.prop"
      :label="col.label"
      :min-width="col.minWidth"
    />
  </el-table>

  研究中......
</template>


<style scoped lang="scss">
  .encrypt {
    margin-bottom: 30px;
    p{
      margin-bottom: 20px;
    }
  }
  .decrypt {
    margin-bottom: 30px;
    p{
      margin-bottom: 20px;
    }
  }
  .el-input,
  .el-textarea {
    width: 400px;
    margin-right: 20px;
  }
  .el-table {
    margin: 20px 0;
  }
</style>